<#assign ctx=request.contextPath />
<!doctype html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <title>列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- CSS文件 -->

    <link href="${ctx}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/css/global.css" rel="stylesheet">
    <link href="${ctx}/css/plugins/footable/footable.core.css" rel="stylesheet">
    <link href="${ctx}/css/style.css" rel="stylesheet">
    <!--layui-->
    <link href="${ctx}/layui/css/modules/layer/default/layer.css" rel="stylesheet">
</head>

<style>
    input[type=checkbox], input[type=radio] {
        margin: 0;
    }

    .form-inline label {
        margin-right: 10px;
    }
    .input-group-addon{
        width:81px;
    }
    .form-control{
        width:165px!important;
    }
</style>

<body>
<div style="padding: 15px;">
    <div class="row">
        <div class="form-group col-md-2">
            <div class="input-group">
                <span class="input-group-addon">项目名</span>
                <input type="text" name="name" class="form-control" id="name">
            </div>
        </div>
        <div class="form-group col-md-2">
            <div class="input-group">
                <span class="input-group-addon">负责人</span>
                <input type="text" name="uname" class="form-control" id="uname">
            </div>
        </div>
        <div class="form-group col-md-2">
            <div class="input-group">
                <button class="btn btn-primary" onclick="queryProject();">查询</button>
            </div>
        </div>
    </div>
    <div style="height: 1px; background-color: #e5e5e5; margin-top: 20px;"></div>
    <div class="wrapper wrapper-content table-responsive">
        <table class="table table-hover" id="tabList" data-page-size="10" data-filter=#filter data-limit-navigation="5">
            <thead>
            <tr>
                <th nowrap="nowrap">序号</th>
                <th nowrap="nowrap">项目名</th>
                <th nowrap="nowrap">IDE</th>
                <th nowrap="nowrap">技术框架</th>
                <th nowrap="nowrap">负责人</th>
                <th nowrap="nowrap">添加人</th>
                <th nowrap="nowrap">添加时间</th>
                <th nowrap="nowrap">操作</th>
            </tr>
            </thead>
            <tbody id="tbodyDiv">
            <#list list as node>
            <tr id="tr_${node.id}">
                <td nowrap="nowrap">${node_index+1}</td>
                <td nowrap="nowrap">${node.name}</td>
                <td nowrap="nowrap">${node.ide}</td>
                <td nowrap="nowrap">${node.framework}</td>
                <td nowrap="nowrap">${node.uname}</td>
                <td nowrap="nowrap">${node.addName}</td>
                <td nowrap="nowrap">${node.date}</td>
                <td nowrap="nowrap">
                    <a class="btn btn-warning btn-sm" href="${ctx}/updateProjectView?id=${node.id}">修改</a>&nbsp;&nbsp;&nbsp;
                </td>
            </tr>
            </#list>
            </tbody>
        <#--分页部分-->
            <tfoot id="foot">
            <tr>
                <td colspan="20">
                    <ul class="pagination"></ul>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>
<#-- 搜索无内容显示 -->
    <div class="box_1" id="noData" <#if (list?size>0)>style="display: none;"</#if>>
        <i class="fa fa-frown-o fa-5x"></i>
        <p>抱歉，没有数据</p>
    </div>
</div>
<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctx}/js/plugins/footable/footable.all.min.js"></script>
<script src="${ctx}/layui/lay/modules/layer.js"></script>
<script>
    //自动分页必须初始化
    $(document).ready(function () {
        $('#tabList').footable({
            "paging": {
                "enabled": true
            },
            "sorting": {
                "enabled": false
            }
        });
    <#--if(${areaList.size()>0})-->

    });

    //删除
    function deleteNote(name, id) {
        layer.msg('你确定删除' + name + '？', {
            time: 0 //不自动关闭
            , btn: ['确定', '取消']
            , yes: function (index) {
                layer.close(index);
                deletes(id);
            }
        });
    }

    function deletes(id) {
        $.get("${ctx}/deleteNote",
                {id: id},
                function success(res) {
                    layer.msg(res.msg);
                    if (res.status == 0) {
                        $('tr#tr_' + id).remove();
                        $('#tabList').trigger('footable_initialize');// 表格数据重载、分页重载
                    }
                })
    }

    //查询
    function queryProject() {
        var title = $('input#title').val();
        var lang = $('select#lang option:selected').val();
        var type = $('select#type option:selected').val();
        var project = $('select#project option:selected').val();
        var status=$('select#status option:selected').val();
        $.ajax({
            url: '${ctx}/queryNote',
            type: 'post',
            data: {
                title: title,
                lang: lang,
                type: type,
                project: project,
                status:status,
            },
            success: function (res) {
                if (res.status == 0) {
                    initTable(res.t)
                }
            }
        })
    }

    // 初始化
    function initTable(list) {
        var html = "";
        for (var i = 0; i < list.length; i++) {
            var node = list[i];
            html += '<tr id="tr_' + node.id + '">';
            html += '<td>' + (i + 1) + '</td>';
            html += '<td><a onclick="window.open(\'' + node.url + '\');">' + node.title + '</a></td>';
            html += '<td>' + node.langStr + '</td>';
            html += '<td>' + node.typeStr + '</td>';
            html += '<td>' + node.projectStr + '</td>';
            html += '<td>' + node.statusStr + '</td>';
            html += '<td>' + node.date + '</td>';
            html += '<td><a class="btn btn-warning btn-sm" href="${ctx}/updateNoteView?id=' + node.id + '">修改</a>&nbsp;&nbsp;&nbsp;' +
                    '<button class="btn btn-danger btn-sm" onclick="deleteNote(\'' + node.title + '\',' + node.id + ');">删除</button>' +
                    '</td></tr>';
        }
        if (list.length > 0) {
            $("#noData").css("display", "none");
        } else {
            $("#noData").css("display", "flex");
        }
        $('tbody#tbodyDiv').empty();
        $('tbody#tbodyDiv').html(html);
        $('.pagination').empty();
        $('#tabList').trigger('footable_initialize');// 表格数据重载、分页重载
    }
</script>
</body>
</html>
